Learn how to create great-looking, interactive maps with d3.

A comprehensive video course to create geospatial data visualizations with javascript and d3.

30405060Chicago avg.: 48

Get the first six-part lesson for free on creating a simple map.

    Want to learn how to create this map?

    Preorder the course now!

    Learning d3 can be hard

    You not only need to learn d3 but a lot of other concepts before that.

    There are a lot of ways of doing things in d3. There is no one approach.
    If you search on social networks and google, there are a ton of tweets and blog posts about why d3 is hard for them.

    "I want to just jump in, yet it seems like I need to know a bunch of the api to get even a simple graph up."

    Learning with examples is frustrating

    Most people learn d3 by looking at examples and changing parts of it to fit their needs.

    You iterate on these examples, look at the documentation, maybe consult a book or look at videos on YouTube.

    But people get frustrated using this method.

    "After looking at a few d3.js demos, I had thought that the above task would be trivially easy with d3.js, but in fact I have found it to be insanely difficult."

    Undocumented example code makes it harder to learn

    A lot of examples don’t have of comments or explanations. Which makes it hard to understand what is being done.

    "Without comments and explanations of what is happening along the way, it’s very hard for someone starting out to figure out what’s going on."

    Potentially bad code is hard to fix

    Everyone can create examples with d3, and it’s hard to know the experience level of the creator.
    Examples may have bad or repetitive code. If you learn with these possibly bad examples, you could learn the wrong things.

    "There’s the problem of blocks that are written with bad code, or don’t include the necessary data files or libraries."

    Old examples lead to more frustration

    Thanks to the introduction of observable more examples are created with the current version of d3. But on bl.ocks a majority of examples are still created with v3 which was replaced in 2016 with v4.

    "Most of the resources I’ve found are either old (v3, I know I can still follow them, but I’d rather follow a v4 tutorial) or very convoluted. It seems like I spend half my time trying to figure out why the graph won’t compile."

    Most d3.js tutorials only scratch the surface

    "I’ve gone through some tutorials but I find that they only scratch the surface and are often fragmented — learning the code for building a scale doesn’t mean anything to me without the accompanying chart."

    Inspired by the amazing @milafrerichs #D3 workshop at #foss4gna, I was able to create an interactive globe map of my twitter friends.

    Chris Marx

    Chris Marx

    How this course is different

    Geospatial Data Visualization with d3 will help you take a more focussed approach for learning d3.

    Retain more by learning with projects

    Project-based learning is believed to result in more in-depth knowledge through active exploration of real-world challenges and problems.

    “[Project-based learning] encourages higher order critical thinking and de-emphasizes memorization. Increases motivation to learn in order to arrive at a solution. “

    Self-check your learning

    Check what you learn after each section with exercises.

    Stay on top of your learning path

    Weekly accountability emails will help you stay on top of your learning experience and keep you motivated.

    Modeled from successful hands-on workshops

    This course is modeled from hands-on workshops at geospatial conferences I gave over the last three years.

    I iterated on the format, the course content, and examples over the years to land on this course format and content.

    Conferences I gave this workshop at:

    • FOSS4G UK 2019
    • FOSS4G Noth America 2019
    • FOSS4G Oceania 2018
    • FOSS4G 2017

    Plans

    Self-Study
    • Access to online-course
    • 4 course projects
    • > 17 lessons
    • > 68 excercises
    You will get access to the course website and all course material and go through the course by yourself.
    $199 $139
    Group Study
    • Access to online-course
    • 4 course projects
    • > 17 lessons
    • > 68 excercises
    • Weekly accountability emails
    • By-weekly group coaching call
    • Access to accountability forum and group
    You get access to the course and will be assigned to a group of 5 people. Your group will get access to a special forum where you can discuss your projects and your progress. I will be available as well for questions and help.
    $450 $315
    Group Study Pro
    • Access to online-course
    • 4 course projects
    • > 17 lessons
    • > 68 excercises
    • Weekly accountability emails
    • By-weekly group coaching call
    • Access to accountability forum and group
    • Lifetime access to updates
    • 1x 30 60 minute call with me
    • Library of starter projects
    • Templates (private github repo)
    • Tip ebook
    $999 $699

    If you're having trouble with the integrated buying option click here

    Course content

    Lesson 1: Simplest Map Possible Learnings

    In this lesson, you'll create your first simple map. You'll learn all the important aspects of creating maps with d3.

    Lesson 2: Housing Burden Project - Basic Choropleth Map

    Create our first map from a GeoJSON and how to style it.

    Lesson 3: Housing Burden Project - Interactivity

    How to make your map interactive with tooltips and zoom

    Lesson 4: Housing Burden Project - Bubble Map

    Learn the concepts of creating a bubble map

    Lesson 5: Housing Burden Project - Annotations

    How to enhance your map with annotations

    Lesson 6: Bousing Burden Project - small multiples

    What are small multiplies and how to use them.

    Lesson 7: Housing Burden Project - reusable code

    How to create code that is reusable among projects and make updating your chart easier

    Lesson 8: Housing Burden Project - responsiveness

    Create responsive maps with d3

    Lesson 9: housing burden project - Animations

    How to animate your maps with transitions.

    Lesson 10: housing burden - dashboard

    Bringing all together and create our first dashboard.

    Advanced Course Content

    The more advanced part of the course is still t.b.d. and you can influence the direction of the course.

    Lesson: Live Election Map Project

    How to update your chart with live data.

    Lesson: Hexbin Map

    When to use Hexbins How to create Hexbins

    Lesson: Multivariate Choropleth Map

    What are Multivariate Choropleth Maps

    How to use and create them

    Lesson: Project NO2 levels in the atmosphere

    How to get satellite data, how to display raster data on a d3 map

    Lesson: Zoning Project

    How to use canvas to visualize all buildings in San Diego and their property zone.

    Lesson: Basemaps with d3

    How to use vector tiles with d3

    How to use raster tiles with d3

    Bonus: Data Aggregations with d3 Learnings: Rollup, map

    Projects

    Project 1: Housing Burden Chicago

    We look at the amount people of Chicago need to invest in housing. There is an interesting dataset from the city of Chicago.

    We first create a basic Choropleth map to visualize the housing burden per neighborhood. The info window will include a bubble map as well with additional data.

    We then move forward and create a dashboard with interactivity, tables, and small multiples.

    Project 2: Live Election Map

    We look at a mock election for a city election. I will provide a server with real-time data of results and we use Choropleth maps and Cartograms to visualize the election results.

    Project 3: NO2 levels in a City

    Using satellite raster data we look at NO2 levels in different cities around the world.

    Project 4: Single Family zoning in San Diego

    We look at zoning data for the city of San Diego and look at different ways to map

    What kind of maps will you be able to create after you‘ve gone through the course?

    Attributions:

    Hexbin map at top: Mike Bostock
    Choropleth Map: New York Time
    Bubble Map: Washington Post